<template>
  <div>
    <el-table
      :data="tableData.slice((page.pageIndex-1)*page.pageSize,page.pageIndex*page.pageSize)"
      style="width: 100%" 
      height="calc(100vh - 500px)"
      ref="table"
      highlight-current-row>
      <el-table-column align="center" type="index" width="80" label="序号"></el-table-column>
      <el-table-column
        label="分类"
        align='center'
        width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.value" placeholder="请选择" clearable :disabled="currentNode.lockFlag == 1">
            <el-option
              v-for="item in option"
              :key="item.id"
              :label="item.propertyType"
              :value="item.id + ''">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="同义词"
        align='center'
        min-width="180">
        <template slot-scope="scope">
          <span class="synonym-item" v-for="(item,index) in scope.row.relationList" :key="index">{{item.synonymy}} <i style="cursor: pointer;" class="el-icon-close" v-if="currentNode.lockFlag == 2" @click="deleteSynonym(scope.row.relationList,index,item)"></i></span>
          <span class="synonym-item" style="border:1px dashed #dcdfe6;cursor: pointer;" @click="addSynonym(scope.row)" v-if="currentNode.lockFlag == 2"><i class="el-icon-plus"></i></span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align='center' width="100">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-delete" :disabled="currentNode.lockFlag == 1" @click="handleDel(scope.$index,scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row>
      <el-col :span="24">
        <div class="pagination">
          <!-- 分页 -->
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="page.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" :total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 新增同义词弹窗 -->
    <el-dialog
      v-if="synonymVisible"
      title="新增同义词"
      :visible.sync="synonymVisible"
      width="750px"
      :show-close="false"
      :close-on-click-modal="false"
      center>
      <div style="height: 70px;padding: 20px 105px 0px">
        <el-input placeholder="请输入同义词" v-model="synonymText"  :maxlength="20"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="synonymConfig">保 存</el-button>
        <el-button @click="()=>{this.synonymVisible = false}">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
 import {
    delSynonymInfoApi
  } from "@/api/medicalLibrary/medicalbank";
export default {
  props: {
    currentNode: {
      type: Object,
      default: ()=>{
        return {}
      }
    }
  },
  data(){
    return{
      // 当前节点
      // currentNode: {},
      option: [],  //分类枚举
      //属性分类列表
      tableData: [],
      delList: [],
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      },

      // -----弹窗
      currentRow: null, //当前点击的行数据
      synonymVisible: false,
      synonymText: '',  //同义词输入框
    }
  },
  methods: {
    // ---操作按钮
    // 点击添加按钮
    handleAdd(_index,row){
      this.tableData.push({value: '',relationList: []});
    },
    // 点击删除按钮
    handleDel(_index,row){
      this.$confirm(`是否删除此列表?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        let currentIndex = (this.page.pageIndex - 1) * (this.page.pageSize) + _index
        this.tableData.splice(currentIndex, 1);
        if(row.id) this.delList.push(row.id)
        let pageTotal = (this.page.pageIndex - 1)  * this.page.pageSize
        if(this.page.pageIndex != 1 && pageTotal >= this.tableData.length) this.page.pageIndex = this.page.pageIndex - 1
      })
      .catch(() => {});
    },
    // 新增同义词
    addSynonym(row){
      this.currentRow = row
      this.synonymVisible = true
      setTimeout(()=>{
        this.synonymText = ''
      },0)
    },
    // 删除同义词
    deleteSynonym(relationList,_index,item){
      this.$confirm(`是否删除此同义词?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        if(item.id) {
          delSynonymInfoApi(item.id).then((res) => {
            if (res.resultCode === 0) {
              relationList.splice(_index,1)
            }
          })
        }else relationList.splice(_index,1)
      })
      .catch(() => {});
    },
    // 保存同义词
    synonymConfig(){
      if(!this.synonymText.trim()) {
        this.$message.warning('请先输入同义词')
        return
      }
      this.currentRow.relationList.push({ synonymy: this.synonymText.trim()})
      this.synonymVisible = false
    },
    // 页数
    sizeChangeHandle(val) {
      this.page.pageSize = val;
      this.page.pageIndex = 1;
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.pageIndex = val;
    },
    // 重置分页
    resetPage(){
      this.page = {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      }
    }
  }
}
</script>

<style lang="less" scoped>
.synonym-item{
  max-width: 166px;
  white-space: break-spaces;
  height: fit-content;
  padding: 0px 8px;
  margin: 2px 8px 2px 0;
  background: #f5f5f5;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
/deep/ .el-table .cell {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-content: center;	
	}

</style>